//该文件用户创建vuex的store配置项

//引入运行时的Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

//使用Vuex插件，创建vm时可以传入store配置项；必须在创建store实例之前use(Vuex)
Vue.use(Vuex)

//准备actions--用于响应组件中的动作
const actions = {
    //定义类型为jia的操作，接收两个参数，context是一个迷你版store，value是dispatch传递的值
    jia: function(context, value) {
        console.log('actions的jia被调用了', context, value)
        //调用store的commit()通知mutation执行jia的操作，传递值为value；规范上commit中的操作为纯大写
        context.commit('JIA', value)
    },
    jian(context, value) {
        context.commit('JIAN', value)
    },
    jiaOdd(context, value) {
        //actions中可以做一些拦截、增强逻辑
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(()=>{
            context.commit('JIA', value)
        }, 1000)
    }

}

//准备mutations--用于操作数据（state）
const mutations = {
    //定义类型为JIA的操作，接收两个参数，state是存储共享数据的对象，value是dispatch传递的值
    JIA: function(state, value) {
        console.log('mutations的JIA被调用了', state, value)
        //在mutations中对state的数据进行操作，修改数据后会引起视图重新渲染
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    }
}

//准备state--用于存储数据
const state = {
    sum: 0, //当前和，共享数据交给vuex管理
}

//准备getters （可选）用于对state的数据进行加工，相当于共享的计算属性
const getters = {
    //写法类似计算属性，函数名就是变量名，接收state参数
    bigSum(state) {
        return state.sum * 10
    }
}

//创建&暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
})
